<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajaxdemo</title>
<!--引入bootstrap样式文件--->
<link rel="stylesheet" type="text/css" href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />

<link rel="stylesheet" href="${basePath }static/css/bootstrapEx.css"> 

<!-- <link href="static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"> -->
<!-- 引入分页插件 -->
<link rel="stylesheet" type="text/css" href="static/paginationjs-master/dist/pagination.css" />
<!--引入jquery-->
<script type="text/javascript" src="${basePath }static/jQuery1.12.4/jquery-1.12.4.min.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript" src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 引入分页插件 -->
<script type="text/javascript" src="static/paginationjs-master/dist/pagination.min.js"></script>
	
<!-- 弹出框 -->
<script type="text/javascript" src="${basePath }static/js/bootstrapEx.js"></script> 

<script type="text/javascript">
	// 使用jquery进行ajax处理
	function doAjaxQuery() {
		// 使用jquery进行ajax请求处理
		$.get("adminInfo/", function(data) {
			// 回调函数的dom操作
			// 解析json数据
			console.info(data);
			// 将ajax查询的结果进行分页处理
			doPaging(data, 5);
			/*
			 注意，如果返回数据为文本类型，需要将json字符串转为json对象
			each函数解析的是json对象，而不是json字符串
			 */
		});

	}
	
	// 分页处理--处理lsit类型的结果集
	function doPaging(data, pagesize) {

		if (isNaN(pagesize) || pagesize <= 0) {
			pagesize = 5; // 默认页面大小为5条记录
		}
		console.info("pagesize:" + pagesize);
		// 获取显示分页控件的div
		$('#querypager').pagination({
			dataSource : data, // 分页的数据源（可以是ajax查询成功之后的json数据对象）
			pageSize : pagesize,// 每页显示的记录条数
			showGoInput : true, // 是否显示goin按钮
			showGoButton : true,
			callback : function(data, pagination) {
				console.info(pagination);
				// 分页处理
				// 解析拼写的html内容
				var strHtml = "";
				$.each(data, function(index, eachVal) {
					strHtml+="<tr>";
					
					strHtml+="<th scope='row'>";
					strHtml+=(index+1);
					strHtml+="</th>";
					
					strHtml+="<td>";
					strHtml+=eachVal.empName;
					strHtml+="</td>";
					
					strHtml+="<td>";
					strHtml+=eachVal.empSex;
					strHtml+="</td>";
					
					strHtml+="<td>";
					strHtml+=eachVal.empPhone;
					strHtml+="</td>";	
					
					strHtml+="<td>";
					strHtml+="<img src='";
					strHtml+=eachVal.empImg;					
					strHtml+="' width='30px' height='30px'/>";
					strHtml+="</td>";
					
					strHtml+="<td>";
					strHtml+="<a href='javascript:updateById(\"jump?pg=Restful/restfulUpdate&uid=";
					strHtml+=eachVal.empId;					
					strHtml+="\")'>";
					strHtml+="修改</a>";
					strHtml+="</td>";
					
					strHtml+="<td>";
					strHtml+="<a href='javascript:ajax_deletebyId(";
					strHtml+=eachVal.empId;					
					strHtml+=")'>";
					strHtml+="删除</a>";
					strHtml+="</td>";
					
					strHtml+="</tr>";
				});
				// 把解析的html内容，使用dom操作赋值到表格中
				$("#displaytbody").html(strHtml);
			}
		})
	}
	
function ajax_deletebyId(empid){
		var isOK = confirm("是否删除该记录?");
		if(!isOK){
			return false;
		}
		console.info("ajax_deletebyId");
		// 使用jquery进行ajax请求处理
		var delelteUri = "adminInfo/"+empid;
		console.info(delelteUri);
		$.ajax({
			type : "delete", // 请求类型
			url : delelteUri, // 请求的url
			//data : $("#form1").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
			dataType : "json", // 响应发挥的数据类型  
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
				// 解析json数据
				console.info(data);
				// 将ajax查询的结果进行分页处理
				doPaging(data, 5);
			},
			error : function(data) {
				alert("请求失败" + data);
			}
		});
	}
	
	var Modal3;//弹出层对象
	function updateById(pageURL){
		InitModal(pageURL);
        Modal3.show();
        $("#btnsave").click(function(){
        	$('iframe').contents().find("#dobtn").click();
		})
	}
	function InitModal(pageURL) {
	    $(document.body).append('<div id="modal3"></div>');
	    Modal3 = new Modal();
	    Modal3.renderto = "#modal3";
	    Modal3.InitShow = true;
	    Modal3.btns = [{ id: "btnsave", text: "保存" }, { id: "closebtn" }]
	    tab1 = new Tab();
	    Modal3.OnfirstInited = function (thismodal) {
	        tab1.tabs = [{
	            id: "tabs1", title: "修改信息", active: true, isiframe: true, url: pageURL
	        }];
	        tab1.renderto = thismodal.body;
	        tab1.Init();
	    }
	}
	
	
		
		
</script>

</head>
<body>
	<form id="form1" class="form-horizontal" action="LoginAction"
		method="post">
		<div class="form-group" style="margin-top: 10px;">
			<label class="col-sm-2 control-label">姓名</label>
			<div class="col-sm-3">
				<input type="text" class="form-control" id="adminname"
					name="empName" placeholder="请输入用户名">
			</div>

			<label class="col-sm-2 control-label">ID</label>
			<div class="col-sm-3">
				<input type="text" class="form-control" id="adminaddress"
					name="empId" placeholder="请输入ID">
			</div>
		</div>

		<div class="form-group">
			<div class="col-sm-offset-5 col-sm-2">
				<button type="button" class="btn btn-default"
					onclick="doAjaxQuery()">查询</button>
			</div>
		</div>

		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-7">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>性别</th>
							<th>手机</th>
							<th>头像</th>	
							<th>操作1</th>
							<th>操作2</th>
						</tr>
					</thead>
					<tbody id="displaytbody">

					</tbody>
				</table>
			</div>
			<div class="col-sm-offset-2 col-sm-7">
				<div class="inner-left preview" id="querypager"></div>
			</div>
		</div>
		<!-- /example -->
	</form>
</body>
</html>